<template>
	<el-card class="business-detail-container">
		<div slot="header" class="card-header">
			<div v-if="type === 'page'">
				<span>{{pageInfo.pageName}}</span>
				<el-tooltip placement="top" class="info">
					<div slot="content">
						<p>位置标识：{{pageInfo.pageId || "--"}}</p>
						<p>位置类型：{{$pageTypeObj[pageInfo.pageType] || "--"}}</p>
						<p>位置名称：{{pageInfo.pageName || "--"}}</p>
					</div>
					<span><i class="el-icon-info"></i></span>
				</el-tooltip>
			</div>
			<div v-if="type === 'biz'">
				<span>{{bizInfo.bizName}}</span>
				<el-tooltip placement="top" class="info">
					<div slot="content">
						<p>栏目名称：{{bizInfo.bizName || "--"}}</p>
						<p>组织机构：{{bizInfo.orgCodeValue || "--"}}</p>
						<p>栏目描述：{{bizInfo.bizDesc || "--"}}</p>
					</div>
					<span><i class="el-icon-info"></i></span>
				</el-tooltip>
			</div>
			<div v-if="type === 'biz'">
				<!--<el-select
					style="margin-right: 8px;"
					v-model="searchArgs.productCode"
					placeholder="产品编码"
					size="mini"
					@change="handleQueryPageNavigate">
					<el-option
						v-for="item in $productCodeList"
						:key="item.value"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>-->
				<el-select
					v-model="searchArgs.sdkType"
					placeholder="SDK类型"
					size="mini"
					@change="handleChangeSdk">
					<el-option
						v-for="item in sdkTypeList"
						:label="item.label"
						:key="item.value"
						:value="item.value">
					</el-option>
				</el-select>
			</div>
		</div>
		<div class="content">
			<div class="flex-two-container">
				<div class="left-module">
					<el-input size="mini" placeholder="请输入位置名称" clearable v-model="searchContent">
						<el-button
							size="mini"
							slot="suffix"
							@click="handleSearchTree"
							icon="el-icon-search"
							type="text">
						</el-button>
					</el-input>
					<tree-menu class="tree-menu" :treeProps="treeProps" @nodeClick="handleNodeClick"></tree-menu>
				</div>
				<div class="right-module" v-if="pageType">
					<div class="info">
						<div class="img-module">
							<pic-upload-module :picInfo="picInfo" :action="[]"></pic-upload-module>
						</div>
						<el-form size="mini" :model="form" label-width="80px" label-position="left">
							<el-row>
								<el-col :span="12">
									<el-form-item :label="pageType=='1'?'页面名称:':'资源位名称:'">{{form.pageName || "--"}}</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item :label="pageType=='1'?'页面类型:':'资源位类型:'">{{form.subType || "--"}}</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="位置ID：">{{form.pageId || "--"}}</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="URL：">{{form.pageUrl || "--"}}</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="说明：">{{form.desc || "--"}}</el-form-item>
								</el-col>
								<el-col :span="24" v-if="pageType == '1'">
									<el-button size="mini" type="primary" @click="handlePageStatistics">页面访问统计</el-button>
								</el-col>
							</el-row>
						</el-form>
					</div>
					<div class="tab">
						<el-tabs v-model="tabActive" @click="handleTabClick">
							<el-tab-pane label="页面级埋点" name="page">
								<bury-table :eventInfo="eventInfo"></bury-table>
							</el-tab-pane>
							<el-tab-pane label="页面及下级埋点" name="all">
								<bury-table :eventInfo="childEventInfo"></bury-table>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
				<div class="right-module" v-else>
					<div class="all-bury-content">
						<bury-table :eventInfo="buryInfoProps"></bury-table>
					</div>
				</div>
			</div>
		</div>
		<el-drawer
			class="flex-el-drawer"
			size="60%"
			direction="rtl"
			:with-header="false"
			:visible.sync="pageStatisticsDrawer.visible">
			<div class="el-drawer__header">
				<div>
					<span>{{pageStatisticsDrawer.title}}</span>
				</div>
				<button class="el-drawer__close-btn" @click="handlePageStatisticsClose">
					<el-icon class="el-icon-close"></el-icon>
				</button>
			</div>
			<div class="el-drawer-content">
				<event-statistic :info="info"></event-statistic>
			</div>
			<div class="el-drawer-footer">
				<el-button size="mini" type="primary" @click="handlePageStatisticsClose">关闭</el-button>
			</div>
		</el-drawer>
	</el-card>
</template>

<script>
	import buryTable from "./buryTable";
	import eventStatistic from "./eventStatistic";

	export default {
		name: "businessDetail",
		data() {
			return {
				info: {
					id: null,
					type: "page"
				},
				id: null,
				type: null,
				bizId: null,
				sdkTypeList: [],
				searchContent: "",
				bizInfo: {
					bizSubTypeValue: "欢go基础",
					bizName: "翼支付基础",
				},
				pageInfo: {},
				searchArgs: {
					sdkType: 0,			// 默认值为ios
					productCode: ""
				},
				buryInfoProps: {
					bizId: null,
					pageId: null,
					sdkType: null,
					productCode: null
				},
				eventInfo: {
					pageId: null,
					sdkType: null,
					hasChildren: null
				},
				childEventInfo: {
					pageId: null,
					sdkType: null,
					hasChildren: true
				},
				requirementList: [],
				requirementId: null,
				sdkType: null,
				pageType: null,
				treeProps: {
					data: [],
					action: []
				},
				// pic-upload
				picInfo: {
					url: "",
					iconPosition: [],
				},
				form: {},
				// tabs
				tabActive: "page",
				// 页面统计
				pageStatisticsId: null,
				pageStatisticsDrawer: {
					visible: false,
					title: "事件访问量统计"
				}
			}
		},
		components: {
			buryTable,
			eventStatistic
		},
		mounted() {
			let {id, type} = this.$route.params;
			this.type = type;
			this.id = unescape(id);
			if (type === "page") {
				this.handleQueryPage(this.id, "info");
			} else {
				this.handleQueryBiz(this.id);
			}

		},
		methods: {
			// 处理sdkTypeList：根据appType区分
			handleSdkTypeList() {
				let list = [];
				let {appType} = this.bizInfo;
				list = this.$sdkTypeList;
				if (appType == 1) {
					//	客户端
					list = [
						{
							value: 1,
							label: "android",
						},
						{
							value: 0,
							label: "IOS",
						},
						{
							value: 2,
							label: "Web",
						}
					];
				} else if (appType == 2) {
					// web
					list = [
						{
							value: 2,
							label: "Web",
						}
					];
				} else if (appType == 3) {
					list = [
						{
							value: 2,
							label: "微信小程序",
						}
					];
				}
				this.searchArgs.sdkType = list[0].value;
				this.sdkTypeList = list;
				return list;
			},
			// 查询栏目详情
			async handleQueryBiz(id) {
				let res = await this.$applicationApi.biz_query({
					id
				});
				if (res) {
					this.bizInfo = res.value;
					this.searchArgs.productCode = res.value.productCode;
					this.handleSdkTypeList();
					this.buryInfoProps = {
						bizId: res.value.bizId,
						...this.searchArgs
					};
					this.handleQueryPageNavigate();
				}
			},
			// 改变sdk，查询位置导航，查询埋点列表
			handleChangeSdk(item) {
				this.searchContent = "";
				this.handleQueryPageNavigate();
				if (this.type === "page") {
					this.eventInfo.sdkType = item;
				} else {
					this.buryInfoProps.sdkType = item;
				}
			},
			// 查询位置导航
			async handleQueryPageNavigate() {
				let data = {
					...this.searchArgs,
					pageName: this.searchContent,
					hasMonitorData: true,
				};
				if (this.type === "biz") {
					data.bizId = this.bizInfo.bizId;
				} else {
					data.pageId = this.pageInfo.id;
				}
				let res = await this.$pageApi.pageNavigate(data);
				if (res) {
					let {pageNavigateList} = res.value;
					this.treeProps.data = this.dataToTree(pageNavigateList);
				}
			},
			// 查询位置详情
			async handleQueryPage(id, type) {
				let res = await this.$pageApi.pageQuery({
					id
				});
				if (res) {
					let {pageId, pageType, sdkType, imageUrl, iconPosition} = res.value;
					if (type === "info") {
						this.pageInfo = res.value;
					}
					this.pageType = pageType;
					this.$nextTick(() => {
						this.eventInfo.pageId = pageId;
						this.eventInfo.sdkType = sdkType;
						this.childEventInfo.pageId = pageId;
						this.childEventInfo.sdkType = sdkType;
					});
					this.picInfo = {
						url: imageUrl,
						iconPosition: iconPosition || []
					}
					this.form = res.value;
					this.handleQueryPageNavigate();
				}
			},
			// 搜索
			handleSearchTree() {
				this.handleQueryPageNavigate();
			},
			/*树形导航*/
			// 点击节点，右侧信息变化
			handleNodeClick(obj) {
				// this.pageType = this.$pageTypeObj[obj.actionType];
				this.handleQueryPage(obj.id);
			},
			// tab切换
			handleTabClick(tab) {
				let {name} = tab;
				this.tabActive = name;
			},
			/*---------*/
			// 页面访问统计
			handlePageStatistics() {
				this.info = {
					id: this.form.pageId,
					type: "page"
				};
				this.pageStatisticsDrawer.visible = true;
			},
			handlePageStatisticsClose() {
				this.pageStatisticsDrawer.visible = false;
			}
		}
	}
</script>

<style lang="scss">
	.business-detail-container {
		.card-header {
			.info {
				margin-left: 5px;
			}
		}

		.el-card__body {
			padding: 0;
		}
	}
</style>

<style lang="scss">
	.business-detail-container.el-card {
		.flex-two-container {
			display: -webkit-box;
			display: -moz-box;
			display: -mz-flexbox;
			display: -webkit-flex;
			min-height: 60vh;

			.left-module {
				float: left;
				width: 25%;
				padding: 20px;
				border-right: 1px solid #EBEEF5;
				flex-shrink: 0;

				.tree-menu {
					margin-top: 10px;
				}
			}

			.right-module {
				width: 75%;
				float: left;
				flex-grow: 1;
				width: 0;

				.info {
					display: -webkit-box;
					display: -moz-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					padding: 20px;

					.img-module {
						/*float: left;*/
						width: 30%;
						text-align: center;
					}

					.el-form {
						/*float: left;*/
						/*width: 70%;*/
						-moz-flex-grow: 1;
						-webkit-flex-grow: 1;
						flex-grow: 1;
						padding: 0 15px;
					}
				}

				.tab {
					.el-tabs__nav-wrap {
						padding-left: 20px;
					}

					.el-tabs__content {
						padding: 0 20px;
					}
				}

				.all-bury-content {
					padding: 20px 20px 0 20px;
				}
			}
		}
	}

</style>
